<template>
  <div>
    <h3>设备图片</h3><div v-if="imageUrl">
      
      <img :src="imageUrl" alt="设备图片"/>
    </div>
    <h3>设备详情</h3>

    <el-table :data="detailData" style="width: 100%">
      <el-table-column prop="id" label="设备编号"></el-table-column>
      <el-table-column prop="name" label="设备名称"></el-table-column>
      <el-table-column prop="major" label="专业"></el-table-column>
      <el-table-column prop="unit" label="机组"></el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column prop="updateTime" label="更新时间"></el-table-column>
    </el-table>

  </div>
</template>
<script>
import axios from "axios";

export default {
  data() {
    return {
      detailData: [],
      imageUrl: ""
    };
  },

  methods: {
    

    genImageUrl(picPath) {
      return `http://localhost:9527/equipment/getImage?imageName=${picPath}`;
    },

    getData(id) {
      axios
        .get(`http://localhost:9527/equipment/getEquipmentById/${id}`)
        .then(res => {
          this.detailData = [res.data.data];
          if (res.data.data.picPath) {
            this.imageUrl = this.genImageUrl(res.data.data.picPath);
          }
        })
        .catch(err => console.error(err));
    }
  },

  mounted() {
    const id = this.$route.params.id;
    this.getData(id);
  }
};
</script>
